<template>
  <div class="nav-holder">
    <div class="nav-box flex-row-v-center">
      <div class="logo-box flex-center" @click="goToHome">天涯明月刀</div>
      <ul class="switch-box flex-row-v-center">
        <li class="item" :class="{'active': activeName === 'home'}">
          <nuxt-link to="/">首页</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'account-on-sale'}">
          <nuxt-link to="/account-on-sale">在售账号</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'found-pay'}">
          <nuxt-link to="/found-pay">我要卖号</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'verification'}">
          <nuxt-link to="/verification">验证客服</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'trade-notice'}">
          <nuxt-link to="/trade-notice">交易须知</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'business'}">
          <nuxt-link to="/business">业务介绍</nuxt-link>
        </li>
        <li class="item" :class="{'active': activeName === 'blacklist'}">
          <nuxt-link to="/blacklist">黑号查询</nuxt-link>
        </li>
        <li class="item" @click="goToOtherGame">
          其他游戏
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Core from "@/core/core";

export default {
  name: "Nav",
  props: {
    activeName: ''
  },
  mounted() {

  },
  methods: {
    goToOtherGame() {
      window.open(Core.Const.NET.END_POINT_HOME_WEB, '_blank')
    },
    goToHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-holder {
  width: 100%;
  height: 60px;
  background: #393632;
  position: relative;
  z-index: 2;

  .nav-box {
    width: 1200px;
    height: 100%;
    margin: auto;

    .logo-box {
      width: 160px;
      height: 100%;
      background-image: linear-gradient(270deg, #FBBF02 0%, #F58A01 100%);
      font-weight: 600;
      font-size: 20px;
      color: #FFFFFF;
      cursor: pointer;
    }

    .switch-box {
      padding-left: 60px;
      height: 100%;

      .item {
        margin-right: 50px;
        font-size: 16px;
        cursor: pointer;
        line-height: 56px;
        color: rgba(255, 255, 255, 0.6);

        a {
          color: rgba(255, 255, 255, 0.6);
        }

        &.active {
          border-bottom: 4px solid #F58B01;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);

          a {
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
}
</style>
